<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" href="./css/amazeui.min.css" />
	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<script type="text/javascript" src="./js/amazeui.min.js"></script>
	<title>乘车</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}

		
		body{
			background: #F2F2F2;
		}
		header{
			width: 100%;
			height: 40px;
			background: #fe4a3b;
			text-align: center;
			color: #ffffff;
			line-height: 40px;
			font-size: 100%;
			letter-spacing:1px;
			font-weight: 400;
		}
		.top{
			width: 100%;
			height: 35px;
			background: #F2F2F2;
			text-align: center;
			color: #9B9B9B;
			line-height: 35px;
			font-size: 70%;
			letter-spacing:1px;
			font-weight: 400;
		}
		.box{
			width: 100%;
			height: auto;
			background: #ffffff;
		}
		.suc{
			width: 90%;
			height: 45px;
			border-bottom: 2px solid #F2F2F2;
			margin: 0 auto;
			text-align: center;
			color: #000000;
			line-height: 45px;
			font-size: 90%;
			letter-spacing:1px;
			font-weight: 100;
		}
		.msg{
			width: 90%;
			margin: 0 auto;
		}
		.msg .msg_top{
			width: 100%;
			display: flex;
			justify-content:space-between;
		}
		.msg .msg_top .right{
			color: #5795C6;
		}
		.msg .msg_center{
			width: 100%;
		}
		.msg .msg_center .left{
			font-weight: 700;
		}
		.msg .msg_bottom{
			width: 100%;
			display: flex;
			justify-content:space-between;
			color: #8F8F8F;
		}
		.pics{
			width: 90%;
			margin: 20px auto;
			overflow: hidden;
		}
		.pics .top{
			width: 100%;
			height: auto;
			overflow: hidden;
		}
		.pics .top .zz1{
			width: 90%;
			position: absolute;
			text-align: center;
			color: #ffffff;
			font-size: 300%;
			font-weight: 700;
			font-family: "黑体";
			margin-top: 10px;
			/*top: 10px;*/
		}
		.pics .top img{
			width: 100%;
		}
		.pics .bottom{
			width: 100%;
			height: auto;
			overflow: hidden;
			padding-bottom: 20px;
			margin-top: -1px;
		}
		.pics .bottom .zz2{
			width: 90%;
			position: absolute;
			text-align: center;
			color: #ffffff;
			font-size: 400%;
			font-weight: 700;
			font-family: "黑体";
			margin-top: -5px;
		}
		.pics .bottom img{
			width: 100%;
		}
		.last{
			width: 100%;
			height: 50px;
			position: fixed;
			bottom: 0px;
			border-top: 2px solid #D4D4D4;
			background: #ffffff;
			
		}
		.last .nei{
			width: 85%;
			margin: 0 auto;
			display: flex;
			justify-content:space-between;
			color: #9E9E9E;
		}
		.last .nei .left{
			width: 50px;
			height: 50px;
			overflow: hidden;
		}
		.last .nei .left .p1{
			width: 100%;
			height: 30px;
			margin: 0 auto;	
		}
		.last .nei .left .p1 img{
			width: 40%;
			height: 20px;
			margin-left: 30%;
			margin-top: 5px;
		}
		.last .nei .left .p2{
			width: 100%;
			height: 20px;
			/*background: yellow;*/
			margin-top: -1px;
			text-align: center;
			line-height: 18px;
			font-size: 12px;
		}

		.last .nei .center{
			width: 50px;
			height: 50px;
			overflow: hidden;
		}

		.last .nei .center .p1{
			width: 100%;
			height: 30px;
			margin: 0 auto;	
		}
		.last .nei .center .p1 img{
			width: 40%;
			height: 20px;
			margin-left: 30%;
			margin-top: 5px;
		}
		.last .nei .center .p2{
			width: 100%;
			height: 20px;
			/*background: yellow;*/
			margin-top: -1px;
			text-align: center;
			line-height: 18px;
			font-size: 12px;
			color: #FE4A3B;
		}

		.last .nei .right{
			width: 50px;
			height: 50px;
			overflow: hidden;
		}

		.last .nei .right .p1{
			width: 100%;
			height: 30px;
			margin: 0 auto;	
		}
		.last .nei .right .p1 img{
			width: 40%;
			height: 20px;
			margin-left: 30%;
			margin-top: 5px;
		}
		.last .nei .right .p2{
			width: 100%;
			height: 20px;
			/*background: yellow;*/
			margin-top: -1px;
			text-align: center;
			line-height: 18px;
			font-size: 12px;
		}
		.big{
			display: none;
		}
		.start{
			margin-top: 50px;
		}
		.start p{
			width: 95%;
			margin:0 auto;
		}
		.start  button{
			width: 95%;
			margin: 50px auto;
		}
	</style>
</head>
<body>
	<header>
		上下班∨
	</header>
	<div class="start">
		<p><input type="text" class="am-form-field am-radius room" value="" placeholder="输入文字" /></p>
		<button type="button" class="am-btn am-btn-primary am-btn-block home">进入</button>
	</div>
	<div class="big">
		<div class="top">
			上车时，出示该电子票给队长或司机验票哦~
		</div>
		<div class="box">
			<div class="suc">
				1人验票成功，本车已验35人
			</div>
			<div class="msg">
				<div class="msg_top">
					<div class="left">3月10日</div>
					<div class="right">加入群聊</div>
				</div>
				<div class="msg_center">
					<div class="left">通州-苏州桥3班（大方居沿线）(CA193)</div>
				</div>
				<div class="msg_bottom">
					<div class="left">消费票卡</div>
					<div class="right">单次票</div>
				</div>
			</div>
			<div class="pics">
				<div class="top">
					<p class="zz1">京ACA193</p>
					<img src="./images/0001.png" alt="" />
				</div>
				<div class="bottom">
					<p class="zz2">尽善尽美</p>
					<img src="./images/0002.png" alt="" />
				</div>
			</div>
		</div>

		<div class="last">
			<div class="nei">
			<a href="http://wx.dudubashi.com/index.php/around/around#&commute" style="color:#9E9E9E">
				<div class="left">
					<p class="p1">
						<img src="./images/0003.png" alt="" />
					</p>
					<p class="p2">购票</p>
				</div>
			</a>


				<div class="center">
					<p class="p1">
						<img src="./images/0004.png" alt="" />
					</p>
					<p class="p2">乘车</p>
				</div>


			<a href="http://wx.dudubashi.com/index.php/users/mine/ddmine" style="color:#9E9E9E">
				<div class="right">
					<p class="p1">
						<img src="./images/0005.png" alt="" />
					</p>
					<p class="p2">我的</p>
				</div>
			</a>
			</div>
		</div>
	</div>
</body>
</html>

<script type="text/javascript">

	var x = 0; 
	var color = ['#73BDEA','#ABD19E','#CCE8EB','#676CAF'];
	setInterval(function(){
		if(x == 3){
			x = 0;
		}

		$('.zz2').css('color',color[x]);
		x++;
	},500);


	$('.home').click(function() {
		var str = $('.room').val();
		$('.zz2').text(str);
		$('.start').css('display','none');
		$('.big').css('display','block');
	});

	
</script>